<template>
  <div>
    <div class="user-info-head" @click="editCropper()">
      <img :src="avatar" title="点击上传头像" class="img-circle img-lg">
      <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened">


        <div class="cropper-content">
          <div class="cropper-box">
            <div class="cropper">
              <vue-cropper
                  ref="cropper"
                  :img="option.img"
                  :outputSize="option.outputSize"
                  :outputType="option.outputType"
                  :info="option.info"
                  :canScale="option.canScale"
                  :autoCrop="option.autoCrop"
                  :autoCropWidth="option.autoCropWidth"
                  :autoCropHeight="option.autoCropHeight"
                  :fixed="option.fixed"
                  :fixedNumber="option.fixedNumber"
                  :full="option.full"
                  :fixedBox="option.fixedBox"
                  :canMove="option.canMove"
                  :canMoveBox="option.canMoveBox"
                  :original="option.original"
                  :centerBox="option.centerBox"
                  :height="option.height"
                  :infoTrue="option.infoTrue"
                  :maxImgSize="option.maxImgSize"
                  :enlarge="option.enlarge"
                  :mode="option.mode"
                  @realTime="realTime"
                  @imgLoad="imgLoad">
              </vue-cropper>
            </div>
            <!--底部操作工具按钮-->
            <div class="footer-btn">
              <div class="scope-btn">
                <label class="btn" for="uploads">选择图片</label>
                <input type="file" id="uploads" style="position:absolute; clip:rect(0 0 0 0);"
                       accept="image/png, image/jpeg, image/gif, image/jpg" @change="selectImg($event)">
                <el-button size="mini" type="danger" plain icon="el-icon-zoom-in" @click="changeScale(1)">放大</el-button>
                <el-button size="mini" type="danger" plain icon="el-icon-zoom-out" @click="changeScale(-1)">缩小
                </el-button>
                <el-button size="mini" type="danger" plain @click="rotateLeft">↺ 左旋转</el-button>
                <el-button size="mini" type="danger" plain @click="rotateRight">↻ 右旋转</el-button>
              </div>
              <div class="upload-btn">
                <el-button size="mini" type="success" @click="uploadImg('blob')">上传头像 <i class="el-icon-upload"></i>
                </el-button>
              </div>
            </div>
          </div>
          <!--预览效果图-->
          <div class="show-preview">
            <div :style="previews.div" class="preview">
              <img :src="previews.url" :style="previews.img">
            </div>
          </div>
        </div>


      </el-dialog>
    </div>
  </div>

</template>

<script>
import {VueCropper} from 'vue-cropper'
// import {saveAvatar} from '@/apis/system/user.js'

export default {
  name: "CropperImage",
  components: {
    VueCropper
  },
  props: ["Avatar"],
  data() {
    return {
      // 是否显示弹出层
      open: false,
      // 是否显示cropper
      visible: false,
      // 弹出层标题
      title: "修改头像",


      name: this.Name,
      avatar:this.Avatar,
      previews: {},
      option: {
        img: '',             //裁剪图片的地址
        outputSize: 1,       //裁剪生成图片的质量(可选0.1 - 1)
        outputType: 'jpeg',  //裁剪生成图片的格式（jpeg || png || webp）
        info: true,          //图片大小信息
        canScale: true,      //图片是否允许滚轮缩放
        autoCrop: true,      //是否默认生成截图框
        autoCropWidth: 200,  //默认生成截图框宽度
        autoCropHeight: 200, //默认生成截图框高度
        fixed: true,         //是否开启截图框宽高固定比例
        // fixedNumber: [1, 1], //截图框的宽高比例(长宽比例)
        full: false,         //false按原比例裁切图片，不失真
        fixedBox: true,      //固定截图框大小，不允许改变
        canMove: true,      //上传图片是否可以移动
        canMoveBox: true,    //截图框能否拖动
        original: false,     //上传图片按照原始比例渲染
        centerBox: true,    //截图框是否被限制在图片里面
        height: true,        //是否按照设备的dpr 输出等比例图片
        infoTrue: true,     //true为展示真实输出图片宽高，false展示看到的截图框宽高
        // maxImgSize: 3000,    //限制图片最大宽度和高度
        enlarge: 1,          //图片根据截图框输出比例倍数
        // mode: '200px 200px'  //图片默认渲染方式
      }
    };
  },
  methods: {

    // 编辑头像
    editCropper() {
      this.open = true;
    },
    // 打开弹出层结束时的回调
    modalOpened() {
      this.visible = true;
    },


    //初始化函数
    imgLoad(msg) {
      console.log("工具初始化函数=====" + msg)
    },
    //图片缩放
    changeScale(num) {
      num = num || 1
      this.$refs.cropper.changeScale(num)
    },
    //向左旋转
    rotateLeft() {
      this.$refs.cropper.rotateLeft()
    },
    //向右旋转
    rotateRight() {
      this.$refs.cropper.rotateRight()
    },
    //实时预览函数
    realTime(data) {
      this.previews = data
    },
    //选择图片
    selectImg(e) {
      let file = e.target.files[0]
      if (!/\.(jpg|jpeg|png|JPG|PNG)$/.test(e.target.value)) {
        this.$message({
          message: '图片类型要求：jpeg、jpg、png',
          type: "error"
        });
        return false
      }
      //转化为blob
      let reader = new FileReader()
      reader.onload = (e) => {
        let data
        if (typeof e.target.result === 'object') {
          data = window.URL.createObjectURL(new Blob([e.target.result]))
        } else {
          data = e.target.result
        }
        this.option.img = data
      }
      //转化为base64
      reader.readAsDataURL(file)
    },
    //上传图片
    uploadImg(type) {
      if (type === 'blob') {
        //获取截图的blob数据
        this.$refs.cropper.getCropBlob(async (data) => {
          let formData = new FormData();
          formData.append('file', data, "DX.jpg")
          //调用axios上传
          saveAvatar(formData).then(res=>{
            this.avatar = process.env.VUE_APP_API+"/" + res.data;
            console.log(this.avatar)
            this.$emit("saveAvatarSuccess",res.data)
            this.open = false;
          })
        })
      }
    },
  },
}
</script>

<style scoped lang="scss">
//
.user-info-head {
  position: relative;
  display: inline-block;
  height: 120px;
  img {
    height: 150px;
    width: 150px;
    border-radius: 30px;
    cursor: pointer;
  }
}
//
.user-info-head:hover:after {
  content: '+';
  position: absolute;
  color: #eee;
  //background: rgba(0, 0, 0, 0.5);
  font-size: 24px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: pointer;
  line-height: 110px;
  border-radius: 20px;
}





.cropper-content {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;

  .cropper-box {
    flex: 1;
    width: 100%;

    .cropper {
      width: auto;
      height: 300px;
    }
  }

  .show-preview {
    flex: 1;
    -webkit-flex: 1;
    display: flex;
    display: -webkit-flex;
    justify-content: center;

    .preview {
      overflow: hidden;
      border: 1px solid #000000;
      background: #cccccc;
    }
  }
}

.footer-btn {
  margin-top: 30px;
  display: flex;
  display: -webkit-flex;
  justify-content: flex-end;

  .scope-btn {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    padding-right: 10px;
  }

  .upload-btn {
    flex: 1;
    -webkit-flex: 1;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
  }

  .btn {
    outline: none;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    -webkit-transition: .1s;
    transition: .1s;
    font-weight: 500;
    padding: 8px 15px;
    font-size: 12px;
    border-radius: 3px;
    color: #fff;
    background-color: #409EFF;
    border-color: #409EFF;
    margin-right: 10px;
  }
}
</style>
